<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="../js/vue.js" ></script>
<!--https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
<div id="app">
      <div>{{info.name}}</div>
      <div>{{info.address.city}}</div>
</div>
<script type="text/javascript">
    let vm=new Vue({
    el:'#app',
    data(){
      return{
        //请求的返回参数，必须和json字符串一样
        info:{
          name:null,
          address:{
            street:null,
            city:null,
            country:null
          }
        }
      }
    },
    mounted(){//钩子函数，链式编程，ES6的新特性
        axios.get('../data.json').then(response=>(this.info=response.data));
    }
  });

</script>

</body>
</html>